<template>
    <!--单个切换视频 -->
    <a-modal v-if="showModal" v-model:open="open" :style :title="title ?? '切换视频'" :width destroyOnClose @ok="uploadFn"
        :confirmLoading>
        <slot name="header" />
        <a-upload-dragger name="file" accept="video/mp4" :fileList :maxCount="1" :multiple="false" action=""
            :before-upload="beforeUploadFn">
            <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击上传或者拖拽上传文件</p>
            <p class="ant-upload-hint" style="color: red">
                仅支持 mp4 格式， 大小不超过 100M
            </p>
        </a-upload-dragger>
        <video v-if="videoUrl" :src="videoUrl" width="100%" height="400" autoplay loop controls metud="true"></video>
    </a-modal>
    <!-- 批量切换视频 -->
    <a-upload-dragger v-if="showVIDEO" name="file" accept="video/mp4" :fileList :maxCount="1" :multiple="false"
        action="" :before-upload="beforeUploadFnVideo">
        <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击上传或者拖拽上传文件</p>
        <p class="ant-upload-hint" style="color: red">
            仅支持 mp4 格式， 大小不超过 100M
        </p>
    </a-upload-dragger>

    <!-- 上传APK版本 -->
    <a-upload-dragger v-if="showAPK" name="file" :fileList :maxCount="1" :multiple="false" action=""
        :before-upload="beforeUploadFn2">
        <p class="ant-upload-drag-icon">
            <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">点击上传或者拖拽上传文件</p>
        <p class="ant-upload-hint" style="color: red">
            仅支持 apk 格式， 大小不超过 600M
        </p>
    </a-upload-dragger>

    <!-- 上传批量注册模板 -->
    <a-modal v-if="showTemplate" v-model:open="open" :style title="上传数据" :width destroyOnClose @ok="uploadTemplate"
        :confirmLoading>
        <a-upload-dragger name="multipartFile" accept=".xlsx" :fileList :maxCount="1" :multiple="false" action=""
            :before-upload="beforeUploadFn3">
            <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">点击上传或者拖拽上传文件</p>
        </a-upload-dragger>
    </a-modal>
</template>
<script lang='ts' setup>
import { InboxOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { POST } from '@/utils';


const { url, title, width, style, resultName, serial, fn, selectedFn, showModal, showVIDEO, showAPK, showTemplate } = defineProps<{
    url?: string,
    title?: string,
    width?: string,
    style?: string | Object,
    resultName?: string,
    serial?: string | string[] | undefined
    fn?: Function
    showModal?: boolean
    showVIDEO?: boolean
    showAPK?: boolean
    showTemplate?: boolean
    selectedFn?: Function
    fileList?: object[]
}>()

let File: File
// const fileList = ref<File[]>([])

const maxSize = 100 * 1024 * 1024;
const open = defineModel('open', { type: Boolean, default: false })
const videoUrl = ref('')
const confirmLoading = ref(false)

const beforeUploadFn = (file: File) => {
    return new Promise((resolve, reject) => {
        // console.log(file);
        if (file.size < maxSize) {
            File = file
            videoUrl.value = URL.createObjectURL(file)
        } else {
            message.error('文件大小超过100M，请重新选择!')
        }
        return resolve(false)
    });
}

const beforeUploadFnVideo = (file: File) => {
    return new Promise((resolve, reject) => {
        // console.log(file);
        if (file.size < maxSize) {
            File = file
            videoUrl.value = URL.createObjectURL(file)
            if (selectedFn) {
                selectedFn(file)
            }
        } else {
            message.error('文件大小超过100M，请重新选择!')
        }
        return resolve(false)
    });
}

const beforeUploadFn2 = (file: File) => {
    return new Promise((resolve, reject) => {
        // console.log(file);
        if (file.name.split('.').pop() !== 'apk') {
            message.error('请上传 apk 文件!')
        } else if (file.size < maxSize * 6) {
            if (selectedFn) {
                selectedFn(file)
            }
        } else {
            message.error('文件大小超过400M，请重新选择!')
        }
        return reject(false)
    });
}

const beforeUploadFn3 = (file: File) => {
    return new Promise((resolve, reject) => {
        File = file
        if (selectedFn) {
            selectedFn(file)
        }
        return resolve(false)
    })
}


const uploadFn = () => {
    confirmLoading.value = true
    const formData = new FormData()
    formData.append('file', File);
    if (typeof serial === 'string') {
        formData.append('serial', serial);
    } else if (typeof serial === 'object') {
        formData.append('serials', serial.join(','));
    }

    POST(url as string, formData, false)
        .then((res: any) => {
            if (fn) {
                fn()
            }
            open.value = false
            videoUrl.value = ''
        }).catch((err: any) => {
            console.log(err);
        }).finally(() => {
            confirmLoading.value = false
        })
}

const uploadTemplate = async () => {
    confirmLoading.value = true
    if (fn) {
        await fn()
    }
    open.value = false
    confirmLoading.value = false
}

defineExpose({ open })

</script>
<style lang='scss' scoped></style>